<template>
  <div class="all">
    <el-card>
      <div slot="header">
        直播分类
      </div>
      <div style="text-align: center;">
        <table width="100%">
          <tr><th width="30%">序号</th>
            <th>分类</th>
            <th>操作</th>
           </tr>
           <tr v-for="item,i in list">
            <td align="center">{{i}}</td>
            <td align="center">
              <el-input v-model="list[i]"></el-input>
            </td>
            <td v-if="i!=0"><el-button type="danger" @click="delLiveType(i)">删除</el-button></td>
           </tr>
           <tr>
             <td align="center"><el-button type="primary" size="small" @click="addLiveType">添加</el-button></td>
             <td align="center"><el-input v-model="add"></el-input></td>
           </tr>
        </table>
        <el-button type="primary" @click="subim">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {LiveTypeGet,LiveTypeSet} from '@/utils/API'
  export default{
    inject:["reload"],
    data(){
      return{
        list:[],
        add:null
      }
    },
    methods:{
      addLiveType(){
        if(this.add){
          this.list.push(this.add)
          this.add=null
        }else{
          this.$message.error('请输入')
        }
      },
      delLiveType(i){
        this.list.splice(i, 1)
      },
      subim(){
        if(this.add){
          this.list.push(this.add)
        }
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          liveTypes:this.list
        }
        console.log(this.list)
        LiveTypeSet(data).then(res=>{
          if(res.code==0){
            this.$message.success('操作成功')
            this.reload()
          }
        })
      }
    },
    mounted() {
      const data={
        adminName:Cookies.get('adminName'),
        token:Cookies.get('token')
      }
      LiveTypeGet(data).then(res=>{
        this.list=res.data

      })
    }
  }
</script>

<style lang="scss" scoped>
.el-card{width: 48%;margin: auto;}
</style>
